<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Steper Kuo">
	<title>Tool: Lazy load the widgets</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/apple-touch-icon.png">
	<link rel="icon" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/favicon.png">

	<!-- Style custom *** CSS -->
	<style data-toggle="previewCode" data-target="#demoWrap" type="text/css">
		/* Demo's CSS here */
		.widget-item
		{
			width: 100%;
			height: 250px;
		}
		.sub-item
		{
			width: 100%;
			background-color: #1ccacd;
		}
	</style>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

	<script type="text/javascript" src="scripts/jquery.widget.min.js"></script>
	<script type="text/javascript" src="scripts/demoWidget.js"></script>
</head>
<body>
<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<!-- Script Fundebug code *** JS -->
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="f3b60739271056d85641a316cd13350f5960922b510427e3ec514bc3f0a74ac5"></script>

<main>

	<!-- Demos -->
	<section id="demos">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<div data-toggle="previewCode" data-target="#demoWrap">
					<!--Demo's html here-->
					<div class="widgets-parent"></div>
				</div>
				<h3 id="overview">Overview</h3>
				<!--Introduction here-->
				<p>

				</p>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<!-- Script Demo *** JS -->
<script data-toggle="previewCode" data-target="#demoWrap" type="text/javascript">
	// Demo's JS here
	var lazyLoadArray = [];
	var lazyLoadInterval = null;

	$(document).ready(function () {
		var widgetArray = [{id: 'widget1'}, {id: 'widget2'}, {id: 'widget3'}, {id: 'widget4'}, {id: 'widget5'}, {id: 'widget6'}, {id: 'widget7'}];
		initLazyLoadWidgetItems(widgetArray);
		lazyLoadInterval = window.setInterval(lazyLoad, 500);
	});

	function initLazyLoadWidgetItems(widgetArray)
	{
		var $allWidgetParent = $(".widgets-parent");
		for (var i = 0, li = widgetArray.length; i < li; i++)
		{
			var categoryNameId = widgetArray[i].id;
			$allWidgetParent.append('<div id="' + categoryNameId + '"></div>');

			// Init widget
			$("#" + categoryNameId).demowidget({
				lazyLoad: true,
				id: categoryNameId
			});
			// Add $widget to array
			lazyLoadArray[lazyLoadArray.length] = $("#" + categoryNameId);
		}
	}

	function lazyLoad()
	{
		if (lazyLoadInterval && lazyLoadArray.length > 0)
		{
			var scrollTop = $(window).scrollTop();
			var i = lazyLoadArray.length;
			while (i--)
			{
				var y = scrollTop + $(window).height() - lazyLoadArray[i].position().top;
				if (y > 0)
				{
					lazyLoadArray[i].trigger('lazyLoad'); // widget event
					lazyLoadArray.splice(i, 1);
				}
			}
		}
		else
		{
			window.clearInterval(lazyLoadInterval);
			lazyLoadInterval = null;
		}
	}
</script>

</body>
</html>